<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  <head>
    <title>通过JavaScript来创建EasyUI布局</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <!-- 引入JQuery -->
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/jQuery/jquery-1.11.3.min.js"></script>
	<!-- 引入EasyUI -->
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/eui/jquery.easyui.min.js"></script>
	<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/eui/locale/easyui-lang-zh_CN.js"></script>
	<!-- 引入EasyUI的样式文件-->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/eui/themes/default/easyui.css" type="text/css"/>
	<!-- 引入EasyUI的图标样式文件-->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/eui/themes/icon.css" type="text/css"/>
      <script type="text/javascript">
          $(function(){
              //画面加载完成之后就调用layout()方法将body变成easy的layout
              $('#easyUILayoutBody').layout();   
          });
      </script>
  </head>
  <!--给body指定class属性指定easy的easyui-layout样式，这样就可以 使用body创建easyui的layout -->
  <body id="easyUILayoutBody">  
    <div data-options="region:'north',title:'North Title'" style="height:100px"></div>
    <!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->  
    <div data-options="region:'west',title:'West'" style="width:100px;"></div>
    <div data-options="region:'center',title:'center'"></div>  
  </body>  
</html>